<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>对比结果详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/fontastic.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <link rel="shortcut icon" href="../img/logo.ico">
</head>
<body>
<div class="page">
    <!-- 顶部导航-->
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">

                    <div class="navbar-header">
                        <!-- 顶部左侧logo --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
                        <div class="brand-text d-none d-lg-inline-block"><strong>氨基酸数据库</strong></div>
                        <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>CATD</strong>
                        </div>
                    </a>
                        <!-- 顶部右侧下拉菜单图标--><a id="toggle-btn" href="#"
                                             class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <!-- 下拉菜单 -->
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item dropdown">
                            <a href="#" class="dropdown-toggle dropdown-user-link" data-toggle="dropdown">
										<span class="dropdown-user-name">
											<i>你好，姓名</i>
										</span>
                            </a>
                            <div class="dropdown-menu pull-right dropdown-menu-bigbox">
                                <div class="dropdown-menu-bigbox-top">
                                    <div id="user_name" class="dropdown-menu-bigbox-top-user-name">
                                        <span>姓名</span>
                                    </div>
                                </div>
                                <div class="row dropdown-menu-bigbox-bottom">
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid"><a href="web/personal.html">
                                        <i class="fa fa-user dropdown-menu-bigbox-bottom-icon"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span><a href="web/personal.html">个人中心</a></span>
                                        </p>
                                    </a></div>
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid"><a href="web/changePwd.html">
                                        <i class="fa fa-key dropdown-menu-bigbox-bottom-icon"
                                           style="font-size: 25px;line-height: 45px;color: #438eb9;"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span><a href="web/changePwd.html">密码修改</a></span>
                                        </p>
                                    </a></div>
                                </div>

                                <div class="row dropdown-menu-bigbox-bottom">
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid">
                                        <i class="fa fa-comments dropdown-menu-bigbox-bottom-icon"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span>消息</span>
                                        </p>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid">
                                        <i class="fa fa-heart-o dropdown-menu-bigbox-bottom-icon"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span>帮助中心</span>
                                        </p>
                                    </div>
                                </div>


                                <div class="row dropdown-menu-bigbox-exit">
                                    <div class="dropdown-menu-bigbox-exit-font">
                                        <a href="web/login.html" class="nav-link logout"><span>退出登录</span><i
                                                class="fa fa-sign-out"></i></a>
                                    </div>
                                </div>
                            </div>

                        </li>

                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="d-flex align-items-stretch padding-top">
        <!-- 侧边导航栏 -->
        <nav class="side-navbar" id="navbar">
            <ul class="list-unstyled">
                <li ><a href="../index.html"> <i class="icon-home"></i>首页 </a></li>
                <li><a href="addAminoAcid.html" > <i class="icon-grid"></i>氨基酸管理 </a>
                </li>

                <li><a href="#culAminoAcid" data-toggle="collapse" aria-expanded="false" aria-controls="culAminoAcid">
                    <i class="fa fa-bar-chart"></i>计算 </a>
                    <ul id="culAminoAcid" class="collapse list-unstyled">
                        <li><a href="culAminoAcid.html">氨基酸计算</a></li>
                        <li><a href="comparison.html">对比</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#culResult" data-toggle="collapse" aria-expanded="false" aria-controls="culResult">
                        <i class="fa fa-bar-chart"></i> 查看计算结果
                    </a>
                    <ul id="culResult" class="collapse list-unstyled show">
                        <li><a href="culResult.html">计算结果</a></li>
                        <li><a href="uploadData.html">上传的数据</a></li>
                        <li class="active"><a href="comparison.html">对比的数据</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- 网页主体 -->
        <div id="main-content" class="content-inner">
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
                    <li class="breadcrumb-item"><a href="comparisonList.html">对比结果列表</a></li>
                    <li class="breadcrumb-item active" id="comparisonName"></li>
                </ul>
            </div>
            <section class="client">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3 class="h4">对比结果详情</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover table-bordered">
                                            <thead class="table-sm text-center">
                                            <tr>
                                                <th>序号</th>
                                                <th>分子量</th>
                                                <th>保留时间</th>
                                                <th>Result</th>
                                                <th>Content</th>
                                                <th>Name</th>
                                                <th>Formula</th>
                                            </tr>
                                            </thead>
                                            <tbody id="comparison-results-detail">
                                            <!-- 数据行将在这里插入 -->
                                            </tbody>
                                        </table>
                                        <nav aria-label="Page navigation">
                                            <ul class="pagination justify-content-center" id="pagination">
                                                <!-- 分页控件将在这里插入 -->
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Copyright &copy; 2024. <a
                                    href="../index.html" target="_blank" title="CATD">ZWH</a></p>
                        </div>
                        <div class="col-sm-6 text-right">
                            <p></p>
                            <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
                        </div>
                    </div>
                </div>
            </footer>        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../vendor/popper.js/umd/popper.min.js"></script>
<script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script src="../vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="../vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="../js/front.js"></script>
<script>
    let currentPage = 1;
    const pageSize = 100;
    let totalPages = 0;
    let currentComparisonName = '';

    $(document).ready(function() {
        const urlParams = new URLSearchParams(window.location.search);
        currentComparisonName = urlParams.get('name');
        if (currentComparisonName) {
            loadComparisonResultsDetail(currentComparisonName, currentPage);
            document.getElementById('comparisonName').textContent = currentComparisonName;
        } else {
            alert('未指定对比名称');
        }
    });

    function loadComparisonResultsDetail(comparisonName, page) {
        $.ajax({
            url: `/amino/comparison-results/${encodeURIComponent(comparisonName)}?page=${page}&size=${pageSize}`,
            type: 'GET',
            success: function(response) {
                displayComparisonResults(response.content, page);
                setupPagination(response.totalPages, response.number + 1);
                currentPage = response.number + 1;
                totalPages = response.totalPages;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', jqXHR.responseText);
                alert('获取数据失败: ' + (jqXHR.responseJSON ? jqXHR.responseJSON.message : errorThrown));
            }
        });
    }

    function displayComparisonResults(data, page) {
        var tbody = document.getElementById('comparison-results-detail');
        tbody.innerHTML = ''; // 清空表格

        data.forEach(function(item, index) {
            var row = document.createElement('tr');

            var cell1 = document.createElement('td');
            cell1.textContent = (page - 1) * pageSize + index + 1; // 计算序号
            row.appendChild(cell1);

            var cell2 = document.createElement('td');
            cell2.textContent = item.molecularWeight;
            row.appendChild(cell2);

            var cell3 = document.createElement('td');
            cell3.textContent = item.rtMin;
            row.appendChild(cell3);

            var cell4 = document.createElement('td');
            cell4.textContent = item.result;
            row.appendChild(cell4);

            var cell5 = document.createElement('td');
            cell5.textContent = item.content;
            row.appendChild(cell5);

            var cell6 = document.createElement('td');
            cell6.textContent = item.name;
            row.appendChild(cell6);

            var cell7 = document.createElement('td');
            cell7.textContent = item.formula;
            row.appendChild(cell7);

            tbody.appendChild(row);
        });
    }

    function setupPagination(totalPages, currentPage) {
        const pagination = document.getElementById('pagination');
        pagination.innerHTML = '';

        const ul = document.createElement('ul');
        ul.className = 'pagination justify-content-end';

        // Previous button
        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
        prevLi.innerHTML = `<a class="page-link" href="#">上一页</a>`;
        prevLi.addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage > 1) loadComparisonResultsDetail(currentComparisonName, currentPage - 1);
        });
        ul.appendChild(prevLi);

        // Page numbers
        const createPageItem = (page) => {
            const li = document.createElement('li');
            li.className = `page-item ${page === currentPage ? 'active' : ''}`;
            li.innerHTML = `<a class="page-link" href="#">${page}</a>`;
            li.addEventListener('click', (e) => {
                e.preventDefault();
                loadComparisonResultsDetail(currentComparisonName, page);
            });
            return li;
        };

        if (totalPages <= 7) {
            for (let i = 1; i <= totalPages; i++) {
                ul.appendChild(createPageItem(i));
            }
        } else {
            ul.appendChild(createPageItem(1));
            if (currentPage > 3) {
                ul.appendChild(document.createElement('li')).innerHTML = '<span class="page-link">...</span>';
            }

            for (let i = Math.max(2, currentPage - 2); i <= Math.min(totalPages - 1, currentPage + 2); i++) {
                ul.appendChild(createPageItem(i));
            }

            if (currentPage < totalPages - 2) {
                ul.appendChild(document.createElement('li')).innerHTML = '<span class="page-link">...</span>';
            }
            ul.appendChild(createPageItem(totalPages));
        }

        // Next button
        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
        nextLi.innerHTML = `<a class="page-link" href="#">下一页</a>`;
        nextLi.addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage < totalPages) loadComparisonResultsDetail(currentComparisonName, currentPage + 1);
        });
        ul.appendChild(nextLi);

        pagination.appendChild(ul);
    }

</script>
</body>
</html>